//自调函数 用户进入页面后函数自执行 按照默认样式对页面进行渲染
; (async () => {
    //调用封装好的myAjax方法实现前段请求后端响应
    let { result: result1 } = await myAjax({
        //后台书写的路由地址
        url: '/api/areas',
    })
    let { result: result2 } = await myAjax({
        url: '/api/grades',
    })
    let { result: result3 } = await myAjax({
        url: '/api/subjects',
    })
    let { result: result4 } = await myAjax({
        url: '/api/cates',
    })

    //地区
    let str = ''
    //通过forEach循环  循环遍历后台路由在数据库内获取的内容 并且使用字符串拼接的方式渲染到当前页面上
    result1.result.forEach((element) => {
        str += ` <li v="${element.area_name}"><a>${element.area_name}</a></li>`
    });
    //将拼接好的字符串 通过jqery的方式渲染到页面
    $('#area').append(str)
    //年级
    let str1 = ''
    result2.result.forEach((element) => {
        str1 += ` <li v="${element.grade_name}"><a>${element.grade_name}</a></li>`
    });
    $('#grade').append(str1)
    //学科
    let str2 = ''
    result3.result.forEach((element) => {
        str2 += ` <li v="${element.subject_name}"><a>${element.subject_name}</a></li>`
    });
    $('#subject').append(str2)
    //类别
    let str3 = ''
    result4.result.forEach((element) => {
        str3 += ` <li v="${element.category_name}"><a>${element.category_name}</a></li>`
    });
    $('#category').append(str3)

})()

let filterData = { page: 1, area: '', grade: '', subject: '', category: '' }

async function getCourses({ page, area = '', grade = '', subject = '', category = '' }) {
    let { result: result5 } = await myAjax({
        url: '/api/courses',
        data: {
            page,
            area,
            grade,
            subject,
            category
        },
    })


    let str4 = ''
    result5.result.data.forEach((element) => {
        str4 += `<li>
        <div class="top">
        <a href="videoDetail.html?id=${element.cid}">
            <img src="${element.image_src}" alt="" class="m">
            <p>学科：${element.subject_name}</p>
        </div>
        <div class="bottom">
            <div class="left">
                <span>人教版语文第一节课程内容讲解</span>
                <span class="time">地区：${element.area_name}</span>
            </div>
            <div class="right">${element.price}元</div>
        </div>
    </li>`
    });

    let nextPage = page + 1 //下一页
    let prevPage = page - 1 //上一页

    if (prevPage <= 1) {
        prevPage = 1
    }

    //页码按钮拼接
    let pageStr = ''
    pageStr += `<li v="${prevPage}">上一页</li>`
    for (let i = 1; i <= result5.result.totalPage; i++) {
        if (i == page) {//如果当前的page和i相同代表当前页
            pageStr += `<li v="${i}" class="active">${i}</li>`
        } else {
            pageStr += `<li v="${i}">${i}</li>`
        }
    }
    pageStr += `<li v="${nextPage}">下一页</li>`

    $('#pages').html(pageStr) //把页码放到容器中
    $('#courses').html(str4)

}
getCourses(filterData)
//存储变量 area grade subject category
//点击事件 获取到用户点击选择的条件
//地区
$('#area').on('click', 'a', async event => {
    //通过事件委托获取到用户点击的子元素的内容并且赋值给全局变量area
    if (event.currentTarget.innerText == '不限') {
        area = ''
    } else {
        area = event.currentTarget.innerText
    }
    //通过jqery获取到父元素id为erea的所有标签为a的子元素 并且清空它们的所有class标签
    $('#area').find("a").removeClass()
    //将点击的那个子元素添加 active class实现高光的目的
    event.currentTarget.className = "active"
    filterData.area = area
    getCourses(filterData)
})
//学科
$('#grade').on('click', 'a', event => {
    if (event.currentTarget.innerText == '不限') {
        grade = ''
    } else {
        grade = event.currentTarget.innerText
    }
    $('#grade').find("a").removeClass()
    event.currentTarget.className = "active"
    filterData.grade = grade
    getCourses(filterData)
})
//年级
$('#subject').on('click', 'a', event => {
    if (event.currentTarget.innerText == '不限') {
        subject = ''
    } else {
        subject = event.currentTarget.innerText
    }
    $('#subject').find("a").removeClass()
    event.currentTarget.className = "active"
    filterData.subject = subject
    getCourses(filterData)
})
//考试类型
$('#category').on('click', 'a', event => {
    if (event.currentTarget.innerText == '不限') {
        category = ''
    } else {
        category = event.currentTarget.innerText
    }
    $('#category').find("a").removeClass()
    event.currentTarget.className = "active"
    filterData.category = category
    getCourses(filterData)
})

$('#pages').on('click', 'li', () => {
    let page = $(this).attr('v') - 0
    filterData.page = page
    getCourses(filterData)
})

//点击搜索按钮跳转到搜索页面
$('#btn_search').on('click', () => {    // alert('ok')
    // window.open
    let value = $('#search_txt').val()

    if (!value) {
        alert('请输入关键字')
        return
    }

    location.href = 'search_list.html?keyword=' + value
})